<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <input type="text" id="new" >
    <div id="box">hha</div>
    <button id="btn">提交</button>
    <script>
        //焦点要先获得，才能失去
        var uesrName = document.getElementsByTagName('input');
        uesrName[0].onfocus = function(){
            console.log('获取焦点')
        }
        uesrName[0].onblur = function(){
            console.log('失去')
        }
        uesrName[0].focus()

        //单击
       //点击button ,盒子隐藏
    //    var btn = document.getElementById('btn')
    //    var flag = true;
    //    btn.onclick = function(){
    //     var box = document.getElementById('box');
    //     if(flag){
    //         box.style.display = 'none'
    //     } else{
    //         box.style.display = ''
    //     }
    //     flag =! flag
    //    }

       //行内样式
       var box = document.getElementById('box');
       box.style.color = 'red';
       box.style.backgroundColor = '#333'
       box.style.fontSize = '50px';
       console.log(box.style.fontSize)

    </script>
</body>
</html>